<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>便民服务平台3.0</title>
    <link rel="stylesheet" href="<c:url value='/resource/css/bootstrap.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/darktooltip.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/animate.min.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/style.css'/>">


</head>

<body>
<jsp:include page="../include/header.jsp"></jsp:include>
<script src="<c:url value='/resource/js/lib/template.js'/>"></script>
<script src="<c:url value='/resource/js/lib/jqPaginator.js?v2.0'/>"></script>

<div class="main-container">
    <div class="mc-hd">
        <p class="app-t">queryCenter</p>
        <h1 class="app-h1">专注高端”互联网+政务”设计</h1>
        <div class="type-wrap">
            <h2 class="typedH2">慧眼看世界，在政务服务的路上不断追求创新！</h2>
        </div>
    </div>
    <div class="mc-bd">

        <div class="container">

            <ol class="breadcrumb">
                <li><a href="<c:url value="/interacts"></c:url>">应用中心</a></li>
                <li class="active">地图导航</li>
            </ol>
            <div class="row">
                <script type="text/javascript"
                        src="http://api.map.baidu.com/api?v=2.0&ak=iqi4mNjkZQxOma6DStdu7021"></script>

                <style type="text/css">
                    .sxzx_search_tit .input_zxzx_1 {
                        width: 200px;
                        height: 26px;
                        float: left;
                        border: 1px solid #e3e3e3;
                        background: #fff;
                        text-align: left;
                        text-indent: 10px;
                        line-height: 26px;
                        color: #bdbdbd;
                        font-family: "微软雅黑";
                    }
                </style>
                <div style="float:left; width:310px;">
                    <div class="sxzx_search mart5" style="width:99%;">
                        <div class="sxzx_search_tit" style="width:99%;">
                            <input type="text" class="input_zxzx_1" style="height:32px" value="" id="txtName" name="name"
                                   placeholder="请输入公安机关名称"/>&nbsp;
                            <input name="" type="submit" value="查询" class="btn btn-sm btn-yellow" id="btnquery" onclick="query();">

                        </div>
                    </div>

                    <div style="margin-top:4px;clear:both;width:99%">
                        <div class="ucr-centent">
                            <table id="mytask_table" class="table table-bordered">
                                <thead>
                                <tr>
                                    <th style="width:20%;text-align: center;">序号</th>
                                    <th>名称</th>
                                </tr>
                                </thead>
                                <tbody id="mytask_clz_dv">
                                </tbody>
                            </table>
                        </div>
                        <ul class="pagination" id="pagination2"></ul>
                    </div>
                    <div id="ListData">


                        <script id="mytask_clz_dv_attid" type="text/html">
                            {{if list.length < 1}}
                            <tr>
                                <td colspan="2">
                                    暂未找到您的数据
                                </td>
                            </tr>
                            {{/if}}
                            {{each list as value i}}
                            <tr>
                                <td id="deptId_{{value.deptId}}" onclick="detail('{{value.deptId}}')"
                                    style="text-align: center;">
                                    {{(pageIndex - 1) * pageSize + (i+1)}}
                                </td>
                                <td id="deptname_{{value.deptName}}"
                                    title="白城市交通局"
                                    style="word-wrap:break-word;word-break:break-all">
                                    <a href="javascript:" style="color:#444;cursor:pointer" onclick="detail('{{value.deptId}}')">{{value.deptName}}</a>
                                </td>
                            </tr>
                            {{/each}}
                        </script>

                    </div>
                </div>
                <input type="hidden" id="hidlng" value=""/>
                <input type="hidden" id="hidlat" value=""/>
                <div id="container"
                     style="float:left;width: 700px; height: 550px; overflow: hidden; margin-left:10px; margin-top:5px;margin-bottom:20px"></div>


                <script type="text/javascript">

                    $(document).ready(function () {
                        query();
                    });

                    var map = new BMap.Map("container");          // 创建地图实例

                    var city = "黑龙江省";
                    map.centerAndZoom(city, 8);             // 初始化地图，设置中心点坐标和地图级别
                    map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
                    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
                    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
                    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件

                    // 编写自定义函数,创建标注
                    function addMarker(point, json) {
                        console.log(json);
                        var title = json.deptFullname;
                        if (title == null) {
                            title = "";
                        }
                        else {
                            if (title.length >= 15) {
                                title = title.substr(0, 15) + "<br/>" + title.substring(15, title.length);
                            }
                        }

                        var address = json.address;
                        if (address == null) {
                            address = "";
                        }

                        var content = "";
                        content += "地址：" + address + "<br/>";

                        var phone = json.orgphone;
                        if (phone != null) {
                            content += "电话：" + phone;
                        }

                        var opts = {
                            width: 250,     // 信息窗口宽度
                            height: 120,     // 信息窗口高度
                            title: "<h4>" + title + "</h4>", // 信息窗口标题
                            enableMessage: true,//设置允许信息窗发送短息
                            message: ""
                        }
                        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象

                        map.openInfoWindow(infoWindow, point); //开启信息窗口

                    }

                    function trans(point) {
                        var convertor = new BMap.Convertor();
                        var pointArr = [];
                        pointArr.push(point);
                        convertor.translate(pointArr, 1, 5, translateCallback)
                    }

                    //坐标转换完之后的回调函数
                    translateCallback = function (data) {
                        if (data.status === 0) {
                            var marker = new BMap.Marker(data.points[0]);
                            map.addOverlay(marker);
                            map.setCenter(data.points[0]);
                            $("#hidlng").val(data.points[0].lng);
                            $("#hidlat").val(data.points[0].lat);
                        }
                    }

                    function detail(guid) {
                        $.ajax({
                            type: "get",
                            url: "<c:url value='/interacts/mapnav/dept/'/>" + guid,
                            beforeSend: function (XMLHttpRequest) {
                                //ShowLoading();
                            },
                            success: function (result, textStatus) {
                                //console.log(data);
                                var json = result.data;//JSON.parse(data);
                                //console.log(json);
                                map.clearOverlays();
                                if (json != null) {
                                    var lnglat = json.coordinate.split(',');

                                    var point = new BMap.Point(lnglat[0], lnglat[1]);
                                    //var point = new BMap.Point(126.5507810000000000, 44.8148010000000000);

                                    map.centerAndZoom(point, 20);

                                    trans(point);//原始坐标转百度坐标

                                    setTimeout(function () {
                                        var newPoint = new BMap.Point($("#hidlng").val(), $("#hidlat").val());
                                        //console.log(newPoint);
                                        addMarker(newPoint, json);
                                    }, 1000);

                                }
                                else {
                                    map.centerAndZoom(city, 8);
                                }
                            },
                            error: function () {
                                //请求出错处理
                                //console.log('error');

                            }
                        });
                    }

                    //查询
                    function query() {
                        new Paging({
                            type: 'GET',
                            data: {ps: 20, pi: 1, deptname: $('#txtName').val()},
                            url: '<c:url value="/interacts/mapnav/page"></c:url>',
                            tempId: "mytask_clz_dv_attid",
                            paginger: "pagination2",
                            containerId: "mytask_clz_dv",
                            errorCallback: function (data) {
                                console.log(data);
                            }
                        }).getPagList();
                    }


                    function LoadMap(id) {
                        $.ajax({
                            type: "get",
                            url: "/DefaultPages/MapService/GetData" + "?name=" + encodeURIComponent(encodeURIComponent(jQuery('#txtName').val())) + "&id=" + id,
                            beforeSend: function (XMLHttpRequest) {
                                //ShowLoading();
                            },
                            success: function (data, textStatus) {
                                var json = null;
                                try {
                                    json = JSON.parse(data);
                                } catch (ex) {
                                    json = window.eval(data);
                                }

                                map.clearOverlays();
                                if (json.length > 0) {
                                    for (var i = 0; i < json.length; i++) {
                                        var lnglat = json[i].ORGCOORDINATE.split(',');

                                        var point = new BMap.Point(lnglat[0], lnglat[1]);
                                        //var point = new BMap.Point(126.5507810000000000, 44.8148010000000000);
                                        if (i == 0) {
                                            map.centerAndZoom(point, 8);
                                        }

                                        trans(point);//原始坐标转百度坐标
                                    }
                                }
                                else {
                                    map.centerAndZoom(city, 8);
                                }
                            },
                            error: function () {
                                //请求出错处理
                            }
                        });
                    }


                    /*
                     * 列表分页方法
                     * 参数传递示例
                     {
                     type: "GET"
                     data:{pageSize:3,pageIndex:1},   --pageSize 当前页显示条数，  pageIndex：当前页
                     url: "aa.aspx?1=1",   获取数据URL
                     tempId: "mysccriptid",   模板ID
                     paginger: "pagination2",  分页控件ID
                     containerId: "mytask_clz_dv",  加载数据容器ID
                     errorCallback: function (data){ alert(data); }  错误回调函数
                     }
                     */
                    var Paging = function (option) {
                        var myoption = option || {};
                        //console.log(myoption);
                        this.getPagList = function () {
                            var myurl = myoption.url;
                            $.ajax({
                                type: myoption.type,
                                url: myurl,
                                data: myoption.data,
                                dataType: "json",
                                success: function (resp) {

                                    resp = eval(resp);
                                    //console.log(resp.data);
                                    var shtml = template(myoption.tempId, resp.data);
                                    $("#" + myoption.containerId).html(shtml);
                                    paginator(resp.data);
                                },
                                error: function (resp) {

                                    if (typeof (option.errorCallback) == "function") {
                                        option.errorCallback(resp);
                                    }
                                }
                            });
                        }

                        //设置分页条数据（私有方法）
                        function paginator(resdata) {

                            var _trow = resdata.totalRow == 0 ? 1 : resdata.totalRow;

                            $.jqPaginator('#' + myoption.paginger, {
                                totalCounts: _trow,
                                pageSize: resdata.pageSize,
                                visiblePages: 10,
                                currentPage: resdata.pageIndex,
                                first: '<li class="first"><a href="javascript:;">首页</a></li>',
                                prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
                                next: '<li class="next"><a href="javascript:;">下一页</a></li>',
                                last: '<li class="last"><a href="javascript:;">尾页</a></li>',
                                selectpage: '{{page}}',
//                                page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                                onPageChange: function (num, type) {
                                    if (type == "change") {
                                        var custom = option;
                                        // console.log(custom);
                                        custom.data.pi = num;

                                        new Paging(custom).getPagList();
                                    }
                                }
                            });
                        }
                    }
                </script>

            </div>
        </div>

    </div>
</div>

<jsp:include page="../include/footer.jsp"/>
<script src="<c:url value='/resource/js/require.js'/>" data-main="<c:url value='/resource/js/main.js'/>"
        id="current-page" current-page="appCenter"></script>

</body>
</html>
